<template>
  <div class="content-wrapper">
    <div class="content-container">
      <el-form :inline="true" :model="listQuery">
        <el-form-item label="培训分类">
          <el-select
            v-model="listQuery.category"
            size="mini"
            clearable
            @change="changeCategory"
          >
            <el-option
              v-for="item in list.category"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="listQuery.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
            :default-time="['00:00:00', '23:59:59']"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="mini"
            round
            type="primary"
            icon="el-icon-search"
            @click="searchDate"
          >
            搜索
          </el-button>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="listQuery">
        <!-- <el-form-item> -->
        <el-button
          v-for="(item, index) in optionsArr"
          :key="item.id"
          round
          :type="item.type"
          size="mini"
          @click="getData(item, index)"
        >
          {{ item.value }}
        </el-button>
      </el-form>

      <el-table
        v-loading="listLoading"
        :data="
          listData.filter(
            (data) =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
        "
        row-key="id"
        align="left"
        highlight-current-row
        height="85vh "
        default-expand-all
      >
        <!-- <el-table-column
          v-for="(item, index) in col"
          :key="`col_${index}`"
          :prop="dropCol[index].prop"
          :label="item.label"
        /> -->
        <el-table-column prop="startTime" label="培训日期" width="100" sortable>
          <template slot-scope="{ row }">
            <span v-if="row.startTime">{{
              $moment(row.startTime).format('YYYY-MM-DD')
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="trainClassifyName"
          label="培训分类"
          width="100"
        />

        <el-table-column prop="label" label="培训名称" mini-width="250" />
        <el-table-column prop="trainerUserName" label="培训讲师" width="150" />
        <el-table-column prop="status" label="状态" width="150" />
        <el-table-column prop="modeName" label="培训方式" width="100" />

        <el-table-column prop="type" label="培训类型" width="100" />

        <el-table-column prop="trainFormName" label="培训形式" width="100" />
        <el-table-column prop="assessName" label="考核方式" width="100" />
        <el-table-column prop="trainSite" label="地点" min-width="100" />

        <el-table-column
          prop="createTime"
          label="创建时间"
          sortable
          width="180"
        >
          <template slot-scope="{ row }">
            <span v-if="row.createTime">{{
              $moment(row.createTime).format('YYYY-MM-DD HH:mm:ss')
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="150px"
          fixed="right"
        >
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入培训名称搜索"
            />
          </template>
          <template slot-scope="{ row }">
            <el-dropdown
              v-if="row.trainerUserId"
              trigger="click"
              class="filter-item"
            >
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <el-dropdown-item @click.native="LookTrain(row, 1)"
                  >查看</el-dropdown-item
                >
                <el-dropdown-item
                  v-if="row.status == 0 && !row.phase"
                  @click.native="LookTrain(row, 2)"
                  >编辑</el-dropdown-item
                >
                <el-dropdown-item v-if="!row.phase" @click.native="Delete(row)"
                  >取消</el-dropdown-item
                >
                <el-dropdown-item
                  v-if="row.phase == 'release'"
                  @click.native="Delete(row)"
                  >取消</el-dropdown-item
                >

                <!-- row.phase == 'release' && -->
                <el-dropdown-item
                  v-if="
                    !row.examinationFlag && row.assess !== 'assess_practical'
                  "
                  @click.native="AssessData(row)"
                  >发起考核</el-dropdown-item
                >
                <el-dropdown-item
                  v-if="row.examinationFlag"
                  @click.native="AssessData(row)"
                  >再次考核</el-dropdown-item
                >

                <!-- v-if="row.examinationFlag" -->
                <el-dropdown-item
                  v-if="row.assess !== 'assess_practical'"
                  @click.native="viewAssess(row)"
                  >考核情况</el-dropdown-item
                >
                <el-dropdown-item
                  v-if="row.assess === 'assess_practical'"
                  @click.native="viewAssess(row)"
                  >实操情况</el-dropdown-item
                >
                <el-dropdown-item
                  v-if="row.examinationFlag"
                  @click.native="sumUp(row)"
                  >培训总结</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="title + '培训'"
      :visible.sync="LookTraindialog"
      width="60%"
      :modal-append-to-body="false"
    >
      <TrainPaper :props-data="propsData" @emitData="emitData" />
    </el-dialog>
    <Assess :assess-data="assessData" />
    <SumUp :sum-up-data="sumUpData" />
  </div>
</template>
 
<script>
import { DeleteData } from '@/api/ts/train.js'

import { listMyTraining } from '@/api/ts/record'

import TrainPaper from '@/views/train/components/TrainPaper/index.vue'
import Assess from '@/views/train/components/Assess/index.vue'
import { outColumnDrop } from '@/views/train/js/concernMeSortable.js'
import { concern_me_formatter } from '@/views/train/js/formatter.js'
import SumUp from '@/views/train/train_list_manage/sumUp/index.vue'
import { processTableTree } from '@/views/train/js/tabel_tree.js'
import { getTimeShortcuts, getEndDay } from '@/utils/index.js'
export default {
  components: {
    TrainPaper,
    Assess,
    SumUp
  },
  data() {
    return {
      title: '',
      listLoading: false,
      list: [],
      LookTraindialog: false,
      propsData: {},
      assessData: '',
      listQuery: {
        timeBegin: this.$moment(getEndDay(0)).format('YYYY-MM-DD HH:mm:ss')
      },
      trainClassify: '',
      maps: new Map(),
      col: [],
      dropCol: [],
      sumUpData: '',
      temp: '',
      listData: [],
      search: '',
      optionsArr: []
    }
  },
  mounted() {
    this.getMyStart()
    this.getData()
  },
  updated() {
    outColumnDrop(this.sortable)
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    getMyStart() {
      processTableTree().then((res) => {
        this.list = res
      })
      this.optionsArr = getTimeShortcuts()
    },
    // 查看//编辑
    LookTrain(row, type) {
      this.LookTraindialog = true
      if (type === 1) {
        this.title = '查看'
      } else if (type === 2) {
        this.title = '编辑'
      }

      this.propsData = { type: type, trainId: row.trainId }
    },
    emitData(data) {
      if (data) {
        this.LookTraindialog = false
      }
    },

    Delete(row) {
      this.$confirm('此操作将删除该计划, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          DeleteData({ trainId: row.trainId }).then((res) => {
            if (res.code == 1) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              console.log(this.maps.get(this.trainClassify))
              const { tree, treeNode, resolve } = this.maps.get(
                this.trainClassify
              )
              this.load(tree, treeNode, resolve)
              // this.$forceUpdate()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    AssessData(row) {
      this.assessData = {
        AssessDialog: true,
        row: row
      }
    },
    viewAssess(row) {
      this.$router.push({
        path: '/train/train_list_record',
        query: { trainId: row.trainId, mode: row.assess, trainName: row.label }
      })
    },
    sumUp(row) {
      this.sumUpData = {
        dialogVisible: true,
        row: row
      }
    },

    getData(row, index) {
      if (row) {
        this.listQuery.timeBegin = row.timeBegin
        this.listQuery.timeEnd = row.timeEnd
        this.optionsArr.forEach((item, i) => {
          if (i === index) {
            item.type = 'primary'
          } else {
            item.type = ''
          }
        })
      }
      const data = this.listQuery
      delete data.date
      this.listQuery = data
      listMyTraining(this.listQuery).then((res) => {
        const data = concern_me_formatter(res)
        this.listData = data
      })
    },
    changeCategory(row) {
      this.getData()
    },
    searchDate() {
      const data = this.listQuery
      this.optionsArr.forEach((item, i) => {
        item.type = ''
      })
      if (data.date) {
        data.timeBegin = this.$moment(this.listQuery.date[0]).format(
          'YYYY-MM-DD hh:mm:ss'
        )
        data.timeEnd = this.$moment(this.listQuery.date[1]).format(
          'YYYY-MM-DD hh:mm:ss'
        )
      }
      listMyTraining(data).then((res) => {
        const data = concern_me_formatter(res)
        this.listData = data
      })
    }
  }
}
</script>